<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <title>场馆设施管理</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    :root {
      --primary: #4CAF50;
      --light-primary: rgba(76, 175, 80, 0.1);
      --secondary: #2196F3;
      --danger: #f44336;
      --light-bg: #f8f9fa;
      --dark-bg: #343a40;
      --text: #212529;
      --light-text: #6c757d;
      --border: #dee2e6;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'Roboto', sans-serif;
    }

    body {
      background-color: var(--light-bg);
      color: var(--text);
      font-size: 0.9rem;
      line-height: 1.5;
    }

    /* 侧边栏样式 */
    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 250px;
      background: white;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
      padding: 20px 0;
      z-index: 100;
      transition: all 0.3s;
      overflow-y: auto;
    }

    .sidebar-header {
      padding: 0 20px 20px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 15px;
      text-align: center;
    }

    .admin-avatar {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background-color: var(--light-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 15px;
      color: var(--primary);
      font-size: 28px;
    }

    .admin-name {
      font-weight: 600;
      font-size: 1.1rem;
    }

    .admin-role {
      color: var(--light-text);
      font-size: 0.85rem;
      background-color: var(--light-primary);
      padding: 3px 10px;
      border-radius: 20px;
      display: inline-block;
      margin-top: 5px;
    }

    .nav-item {
      margin-bottom: 5px;
    }

    .nav-link {
      display: flex;
      align-items: center;
      padding: 10px 20px;
      color: var(--light-text);
      text-decoration: none;
      border-radius: 5px;
      transition: all 0.2s;
    }

    .nav-link i {
      margin-right: 10px;
      font-size: 1rem;
      width: 24px;
      text-align: center;
    }

    .nav-link:hover, .nav-link.active {
      background-color: var(--light-primary);
      color: var(--primary);
    }

    .logout-link {
      margin-top: 20px;
      border-top: 1px solid var(--border);
      padding-top: 15px;
    }

    /* 主内容区样式 */
    .main-content {
      margin-left: 250px;
      padding: 20px;
    }

    .header-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      padding-bottom: 15px;
      border-bottom: 1px solid var(--border);
    }

    .page-title h1 {
      font-size: 1.8rem;
      color: var(--text);
      font-weight: 600;
      margin-bottom: 5px;
    }

    .page-title p {
      color: var(--light-text);
      margin: 0;
    }

    .header-actions {
      display: flex;
      gap: 10px;
    }

    .notification-btn {
      position: relative;
    }

    .notification-badge {
      position: absolute;
      top: -8px;
      right: -8px;
      background-color: var(--danger);
      color: white;
      border-radius: 50%;
      width: 22px;
      height: 22px;
      font-size: 0.7rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* 卡片和表格样式 */
    .card {
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.03);
      margin-bottom: 25px;
      border: none;
      overflow: hidden;
    }

    .card-header {
      padding: 15px 20px;
      background: white;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .card-title {
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--text);
      margin: 0;
    }

    .table-container {
      overflow-x: auto;
      padding: 0;
    }

    .venue-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
    }

    .venue-table th {
      background-color: var(--primary);
      color: white;
      font-weight: 500;
      padding: 12px 15px;
      text-align: left;
    }

    .venue-table td {
      padding: 15px;
      border-bottom: 1px solid var(--border);
      background-color: white;
      transition: all 0.2s;
    }

    .venue-table tr:last-child td {
      border-bottom: none;
    }

    .venue-table tr:hover td {
      background-color: rgba(76, 175, 80, 0.03);
    }

    .venue-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: var(--light-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      font-size: 18px;
    }

    .venue-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .venue-text {
      display: flex;
      flex-direction: column;
    }

    .venue-name {
      font-weight: 600;
      color: var(--text);
    }

    .venue-id {
      font-size: 0.85rem;
      color: var(--light-text);
    }

    /* 标签样式 */
    .status-badge {
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 500;
      text-align: center;
    }

    .status-available {
      background-color: rgba(76, 175, 80, 0.15);
      color: var(--primary);
    }

    .status-maintenance {
      background-color: rgba(244, 67, 54, 0.15);
      color: var(--danger);
    }

    /* 按钮样式 */
    .btn-custom {
      padding: 8px 16px;
      border-radius: 6px;
      font-weight: 500;
      font-size: 0.9rem;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s;
      border: none;
    }

    .btn-primary-custom {
      background-color: var(--primary);
      color: white;
    }

    .btn-primary-custom:hover {
      background-color: #3d8b40;
    }

    .btn-outline-secondary {
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text);
    }

    .btn-outline-secondary:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }

    .action-btn {
      padding: 5px 12px;
      border-radius: 4px;
      font-size: 0.85rem;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .btn-edit {
      background-color: rgba(33, 150, 243, 0.1);
      color: var(--secondary);
    }

    .btn-edit:hover {
      background-color: rgba(33, 150, 243, 0.2);
    }

    .btn-delete {
      background-color: rgba(244, 67, 54, 0.1);
      color: var(--danger);
    }

    .btn-delete:hover {
      background-color: rgba(244, 67, 54, 0.2);
    }

    /* 通知样式 */
    .alert-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1100;
      width: 300px;
    }

    .alert-custom {
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      padding: 15px;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 12px;
      animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
      from { transform: translateX(30px); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }

    .alert-success-custom {
      background-color: rgba(76, 175, 80, 0.15);
      border-left: 4px solid var(--primary);
      color: #2e7d32;
    }

    .alert-error-custom {
      background-color: rgba(244, 67, 54, 0.15);
      border-left: 4px solid var(--danger);
      color: #c62828;
    }

    .alert-icon {
      font-size: 1.3rem;
    }

    /* 搜索框样式 */
    .search-container {
      position: relative;
      width: 250px;
    }

    .search-input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background-color: white;
      font-size: 0.9rem;
      transition: all 0.2s;
    }

    .search-input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
    }

    .search-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--light-text);
      font-size: 1rem;
    }

    /* 操作按钮组 */
    .action-buttons {
      display: flex;
      gap: 8px;
      flex-wrap: nowrap;
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
      .sidebar {
        width: 70px;
      }

      .sidebar-header .admin-name,
      .admin-role,
      .nav-link span {
        display: none;
      }

      .admin-avatar {
        width: 40px;
        height: 40px;
      }

      .main-content {
        margin-left: 70px;
      }

      .nav-link i {
        margin-right: 0;
        font-size: 1.3rem;
      }

      .nav-link {
        justify-content: center;
      }
    }

    @media (max-width: 768px) {
      .header-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
      }

      .header-actions {
        width: 100%;
        justify-content: space-between;
      }

      .card-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
      }
    }
  </style>
</head>
<body>
<!-- 侧边栏导航 -->
<div class="sidebar">
  <div class="sidebar-header">
    <div class="admin-avatar">
      <i class="bi bi-person-circle"></i>
    </div>
    <div class="admin-name">${user.username}</div>
    <div class="admin-role">系统管理员</div>
  </div>

  <nav>
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link" href="../adminHome.jsp">
          <i class="bi bi-speedometer2"></i> <span>首页</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="members">
          <i class="bi bi-people"></i> <span>会员管理</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="houses">
          <i class="bi bi-house-door"></i> <span>房屋管理</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="venues">
          <i class="bi bi-building"></i> <span>场馆管理</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="users">
          <i class="bi bi-person-gear"></i> <span>用户管理</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="profile">
          <i class="bi bi-person-circle"></i> <span>个人信息</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link logout-link" href="logout">
          <i class="bi bi-box-arrow-right"></i> <span>退出登录</span>
        </a>
      </li>
    </ul>
  </nav>
</div>

<!-- 主内容区 -->
<div class="main-content">
  <!-- 顶部标题栏 -->
  <div class="header-container">
    <div class="page-title">
      <h1>场馆设施管理</h1>
      <p>管理社区场馆设施，共计 ${venues.size()} 个场馆</p>
    </div>

    <div class="header-actions">
      <%--<div class="search-container">
        <i class="bi bi-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索场馆...">
      </div>--%>

      <div class="notification-btn">
        <button class="btn btn-outline-secondary">
          <i class="bi bi-bell"></i>
        </button>
      </div>
    </div>
  </div>

  <!-- 通知区域 -->
  <div class="alert-container">
    <% if (request.getAttribute("success") != null) { %>
    <div class="alert-custom alert-success-custom">
      <i class="bi bi-check-circle-fill alert-icon"></i>
      <div><%= request.getAttribute("success") %></div>
    </div>
    <% } %>
    <% if (request.getAttribute("error") != null) { %>
    <div class="alert-custom alert-error-custom">
      <i class="bi bi-exclamation-circle-fill alert-icon"></i>
      <div><%= request.getAttribute("error") %></div>
    </div>
    <% } %>
  </div>

  <!-- 主体卡片 -->
  <div class="card">
    <div class="card-header">
      <h2 class="card-title">场馆列表</h2>
      <button class="btn btn-primary-custom" onclick="openAddModal()">
        <i class="bi bi-plus-circle"></i> 添加场馆
      </button>
    </div>

    <div class="table-container">
      <table class="venue-table">
        <thead>
        <tr>
          <th>场馆信息</th>
          <th>类型</th>
          <th>开放时间</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach var="venue" items="${venues}">
          <tr>
            <td>
              <div class="venue-info">
                <div class="venue-icon">
                  <i class="bi bi-building"></i>
                </div>
                <div class="venue-text">
                  <span class="venue-name">${venue.venueName}</span>
                  <span class="venue-id">ID: ${venue.venueId}</span>
                </div>
              </div>
            </td>
            <td>${venue.venueType}</td>
            <td>${venue.openingTime} - ${venue.closingTime}</td>
            <td>
                <span class="status-badge ${venue.usageStatus == 1 ? 'status-available' : 'status-maintenance'}">
                    ${venue.usageStatus == 1 ? '可用' : '维护中'}
                </span>
            </td>
            <td>
              <div class="action-buttons">
                <button class="action-btn btn-edit"
                        onclick="openEditModal(${venue.venueId}, '${venue.venueName}', '${venue.address}', '${venue.specialNote}', '${venue.openingTime}', '${venue.closingTime}', '${venue.contactPhone}', ${venue.usageStatus}, '${venue.location}', ${venue.size}, '${venue.venueType}', ${venue.responsibleId}, ${venue.chargeStandard}, ${venue.publishStatus}, '${venue.location}')">
                  <i class="bi bi-pencil"></i> 编辑
                </button>
                <button class="action-btn btn-delete"
                        onclick="confirmDelete(${venue.venueId})">
                  <i class="bi bi-trash"></i> 删除
                </button>
              </div>
            </td>
          </tr>
        </c:forEach>
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- 添加场馆模态框 (实现代码与之前相同) -->
<!-- 编辑场馆模态框 (实现代码与之前相同) -->
<!-- 删除确认模态框 (实现代码与之前相同) -->

<!-- 添加场馆模态框 -->
<div class="modal fade" id="addVenueModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          <i class="bi bi-plus-circle modal-icon"></i> 添加新场馆
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="addForm" action="addVenue" method="post">
        <div class="modal-body">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">场馆名称</label>
                <input type="text" class="form-control" name="venueName" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">门牌号/地址</label>
                <input type="text" class="form-control" name="address" required>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">场馆类型</label>
                <input type="text" class="form-control" name="venueType" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">场馆大小(㎡)</label>
                <input type="number" class="form-control" name="size" required>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">开放时间</label>
                <input type="time" class="form-control" name="openingTime" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">关闭时间</label>
                <input type="time" class="form-control" name="closingTime" required>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">联系电话</label>
                <input type="tel" class="form-control" name="contactPhone" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">负责人ID</label>
                <input type="number" class="form-control" name="responsibleId">
              </div>
            </div>
          </div>

          <div class="form-group">
            <label class="form-label">特别说明</label>
            <textarea class="form-control" name="specialNote" rows="2"></textarea>
          </div>

          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">场馆位置</label>
                <input type="text" class="form-control" name="location" required>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">使用状态</label>
                <select class="form-control" name="usageStatus" required>
                  <option value="1">可用</option>
                  <option value="0">维护中</option>
                </select>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">收费标准(元)</label>
                <input type="number" class="form-control" name="chargeStandard" step="0.01" required>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label class="form-label">发布状态</label>
            <select class="form-control" name="publishStatus" required>
              <option value="1">已发布</option>
              <option value="0">未发布</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary-custom">添加场馆</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- 编辑场馆模态框 -->
<div class="modal fade" id="editVenueModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          <i class="bi bi-pencil-square modal-icon"></i> 编辑场馆信息
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="editForm" action="updateVenue" method="post">
        <input type="hidden" id="editVenueId" name="venueId">
        <div class="modal-body">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">场馆名称</label>
                <input type="text" id="editVenueName" class="form-control" name="venueName" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">门牌号/地址</label>
                <input type="text" id="editAddress" class="form-control" name="address" required>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">场馆类型</label>
                <input type="text" id="editVenueType" class="form-control" name="venueType" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">场馆大小(㎡)</label>
                <input type="number" id="editSize" class="form-control" name="size" required>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">开放时间</label>
                <input type="time" id="editOpeningTime" class="form-control" name="openingTime" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">关闭时间</label>
                <input type="time" id="editClosingTime" class="form-control" name="closingTime" required>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">联系电话</label>
                <input type="tel" id="editContactPhone" class="form-control" name="contactPhone" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">负责人ID</label>
                <input type="number" id="editResponsibleId" class="form-control" name="responsibleId">
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">场馆位置</label>
                <input type="text" id="editVenueLocation" class="form-control" name="location" required>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label class="form-label">特别说明</label>
            <textarea id="editSpecialNote" class="form-control" name="specialNote" rows="2"></textarea>
          </div>

          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">使用状态</label>
                <select id="editUsageStatus" class="form-control" name="usageStatus" required>
                  <option value="1">可用</option>
                  <option value="0">维护中</option>
                </select>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label class="form-label">收费标准(元)</label>
                <input type="number" id="editChargeStandard" class="form-control" name="chargeStandard" step="0.01" required>
              </div>
            </div>
          </div>


          <div class="form-group">
            <label class="form-label">发布状态</label>
            <select id="editPublishStatus" class="form-control" name="publishStatus" required>
              <option value="1">已发布</option>
              <option value="0">未发布</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary-custom">更新信息</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteVenueModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-danger text-white">
        <h5 class="modal-title">
          <i class="bi bi-exclamation-triangle modal-icon"></i> 确认删除
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="deleteForm" action="deleteVenue" method="post">
        <div class="modal-body">
          <p class="mb-3">确定要删除这个场馆吗？该操作不可撤销，所有相关数据将被永久删除。</p>
          <p>场馆ID: <strong id="deleteVenueId"></strong></p>
          <input type="hidden" id="deleteVenueIdInput" name="venueId">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-danger">确认删除</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  // 添加场馆模态框控制
  function openAddModal() {
    const modal = new bootstrap.Modal(document.getElementById('addVenueModal'));
    modal.show();
  }

  // 编辑场馆模态框控制
  function openEditModal(venueId, venueName, address, specialNote, openingTime, closingTime, contactPhone, usageStatus, location, size, venueType, responsibleId, chargeStandard, publishStatus, locations) {
    document.getElementById('editVenueId').value = venueId;
    document.getElementById('editVenueName').value = venueName;
    document.getElementById('editAddress').value = address;
    document.getElementById('editSpecialNote').value = specialNote;
    document.getElementById('editOpeningTime').value = openingTime.substring(0, 5);
    document.getElementById('editClosingTime').value = closingTime.substring(0, 5);
    document.getElementById('editContactPhone').value = contactPhone;
    document.getElementById('editUsageStatus').value = usageStatus;
    document.getElementById('editSize').value = size;
    document.getElementById('editVenueType').value = venueType;
    document.getElementById('editResponsibleId').value = responsibleId || '';
    document.getElementById('editChargeStandard').value = chargeStandard;
    document.getElementById('editPublishStatus').value = publishStatus;
    document.getElementById('editVenueLocation').value = locations;

    const modal = new bootstrap.Modal(document.getElementById('editVenueModal'));
    modal.show();
  }

  // 删除确认
  function confirmDelete(venueId) {
    document.getElementById('deleteVenueId').textContent = venueId;
    document.getElementById('deleteVenueIdInput').value = venueId;

    const modal = new bootstrap.Modal(document.getElementById('deleteVenueModal'));
    modal.show();
  }

  // 自动隐藏通知消息
  setTimeout(() => {
    const alerts = document.querySelectorAll('.alert-custom');
    alerts.forEach(alert => {
      alert.style.opacity = '0';
      setTimeout(() => {
        alert.style.display = 'none';
      }, 300);
    });
  }, 5000);
</script>
</body>
</html>